<template>
  <div id="app">
    <component :is = 'switchover'></component>
    <keep-alive v-if = '$route.meta.keepAlive'></keep-alive>
    <router-view v-show = "!boole"></router-view>
      <!--<transition name = "slide-in-out" >-->
        <div class="container--transition" v-show="boole">
          <div>
            <div>
              <img src="./assets/timg.gif" alt="#" class="time" v-show="imgBoole">
              <span class="time__text" v-show="!imgBoole">刷新成功</span>
            </div>
            <keep-alive v-if = '$route.meta.keepAlive'><router-view></router-view></keep-alive>
          </div>
        </div>
      <!--</transition>-->
  </div>
</template>

<script>
import menus from './page/menu'
import videos from './page/video'
export default {
  name: 'App',
  data () {
    return {
      scroll: null,
      imgBoole: true,
      set: null,
      setr: null,
      switchover: menus,
      boole: true
    }
  },
  components: {
    // menus,
    // videos
    menus (relsve) {
      require(['./page/menu'], relsve)
    },
    videos (relsve) {
      require(['./page/video'], relsve)
    }
  },
  methods: {
    bs () {
      /* eslint-disable no-new */
      this.scroll = new this.$BS('.container--transition', {
        scrollX: false,
        scrollY: true,
        click: true,
        probeType: 1,
        pullDownRefresh: {
          threshold: 30, // 下拉距离超过30px触发pullingDown事件
          stop: 60 // 回弹停留在距离顶部20px的位置
        },
        pullUpLoad: {
          threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件
        }
      })
    }
  },
  created () {
    this.$router.push({name: 'top'})
    this.switchover = menus
    this.$bus.$on('video', () => {
      this.boole = true
      this.switchover = videos
    })
    this.$bus.$on('page', () => {
      this.boole = true
      this.switchover = menus
    })
    this.$bus.$on('set', () => {
      this.switchover = false
      this.boole = false
    })
  },
  mounted () {
    this.bs()
    this.scroll.on('pullingDown', () => {
      this.imgBoole = true
      this.set = setTimeout(() => {
        this.scroll.finishPullDown() // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
        this.imgBoole = !this.imgBoole
      }, 2000)
      // this.setr = setTimeout(() => {
      //   this.imgBoole = !this.imgBoole
      // }, 1000)
      this.$http.get('http://localhost:81/data', { params: { key: 'bab4507ad018f2d4eadd583ffa32ce64', type: 'top' } })
        .then((data) => {
          let datas = JSON.parse(data.data.body).result.data
          this.$bus.$emit('top', datas)
        }).catch((e) => {
          console.log(e)
        })
      this.scroll.refresh() //  重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
    })
    this.scroll.on('pullingUp', () => {
      this.$http.get('http://localhost:81/data', { params: { key: 'bab4507ad018f2d4eadd583ffa32ce64', type: 'top' } })
        .then((data) => {
          let datas = JSON.parse(data.data.body).result.data
          this.$bus.$emit('val', datas)
        }).catch((e) => {
          console.log(e)
        })
      this.scroll.refresh() //  重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
      this.scroll.finishPullUp() // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
    })
  },
  updated () {
    this.bs()
    this.scroll.refresh()
  }
}
</script>

<style scoped>
  .time{
    position: absolute;
    top: -3.5rem;
    left: 25%;
    background: #fff;
    width: 5rem;
    height: 5rem;
  }
  .time__text{
    position: absolute;
    left: 43%;
    top: -1rem;
    font-size: 14px;
    color: #dfdfdf;
  }
.container--transition{
  position: relative;
  height: 13.06rem;
  overflow: hidden;
}
.slide-in-out-enter{
  left: 100vw;
  top: 0;
}
.slide-in-out-enter-active{
  position: absolute;
  transition: left .2s ease-in-out;
}
.slide-in-out-enter-to{
  left: 0;
  top: 0;
}
.slide-in-out-leave{
  top: 0;
  left: 0;
}
.slide-in-out-leave-active{
  position: absolute;
  transition: left .3s ease-in-out;
}
.slide-in-out-leave-to{
  left: -100vw;
}
</style>
